<template>
    <div>
        <el-container>
            <el-aside :width="asideWith" style="min-height:100vh ;background-color:#33D3DF">
                <div style="height: 60px;color: white;display: flex ;justify-content: center;align-items: center">
                    <img src="@/assets/logo2.jpg" style="width:50px;height: 40px; border-radius: 25%">
                    <span class="logo-title" v-show="!isCollapse">honey2024</span>
                </div>
                <!--    :default-active	当前激活菜单的 index
                        index menu的地址路由
                        $route.path 当前浏览器访问的路由
                        router 可以启动页面跳转
                        active-text-color="#fff" 设置高亮的颜色为白色
                        :collapse="isCollapse" 设置菜单折叠收缩
                        :collapse-transition="false"取消折叠动画
                        style="border:none" 取消边框
                        text-color="rgba(255,255,255,0.65)" 整体菜单栏字体颜色
                        background-color="#001529" 菜单栏背景颜色
                        <span slot="title">系统首页</span> 这样才会显示字体样式
                        <el-submenu index='3'>二级菜单 <template slot="title"> slot要放在这里面才能生效
                -->
                <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#33D3DF" text-color="black"
                         active-text-color="black"
                         style="border:none" :default-active="$route.path">


                    <el-menu-item index="/home">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">系统首页</span>
                    </el-menu-item>

                    <el-submenu index='/1'>
                        <template slot="title">
                            <i class="el-icon-film"></i>
                            <span>课程与教程</span>
                        </template>
                        <el-menu-item index="/*">==>初级课程</el-menu-item>
                        <el-menu-item index="/*">==>高级课程</el-menu-item>
                        <el-menu-item index="/*">==>免费资源</el-menu-item>
                    </el-submenu>
                    <el-submenu index='/2'>
                        <template slot="title">
                            <i class="el-icon-chat-square"></i>
                            <span>社区与论坛</span>
                        </template>
                        <el-menu-item index="/*">==>论坛板块</el-menu-item>
                        <el-menu-item index="/*">==>活动公告板</el-menu-item>
                        <el-menu-item index="/*">==>用户互动</el-menu-item>
                    </el-submenu>

                    <el-submenu index='/3'>
                        <template slot="title">
                            <i class="el-icon-picture-outline"></i>
                            <span>照片分享与画廊</span>
                        </template>
                        <el-menu-item index="/*">==>个人相册</el-menu-item>
                        <el-menu-item index="/*">==>公共画廊</el-menu-item>
                        <el-menu-item index="/*">==>照片评论与评分</el-menu-item>
                    </el-submenu>

                    <el-submenu index='/4'>
                        <template slot="title">
                            <i class="el-icon-camera"></i>
                            <span>摄影挑战与比赛</span>
                        </template>
                        <el-menu-item index="/*">==>定期挑战</el-menu-item>
                        <el-menu-item index="/*">==>比赛信息</el-menu-item>
                    </el-submenu>

                    <el-submenu index='/6'>
                        <template slot="title">
                            <i class="el-icon-ship"></i>
                            <span>器材评测与推荐</span>
                        </template>
                        <el-menu-item index="/*">==>器材数据库</el-menu-item>
                        <el-menu-item index="/*">==>购买建议</el-menu-item>
                    </el-submenu>


                    <el-submenu index='/7' >
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            <span>个人中心</span>
                        </template>
                        <el-menu-item index="/71">==>个人资料</el-menu-item>
                        <el-menu-item index="/72">==>我的课程</el-menu-item>
                        <el-menu-item index="/73">==>我的照片</el-menu-item>
                    </el-submenu>
                    <el-submenu index='/8' >
                        <template slot="title">
                            <i class="el-icon-phone-outline"></i>
                            <span>帮助与支持</span>
                        </template>
                        <el-menu-item index="/*">==>常见问题解答</el-menu-item>
                        <el-menu-item index="/*">==>联系客服</el-menu-item>
                    </el-submenu>
                    <!-- v-if="user.role==='管理员' 实现菜单动态显示-->
                    <el-submenu index='info' v-if="user.role==='管理员'">
                        <template slot="title">
                            <i class="el-icon-monitor"></i>
                            <span>信息管理</span>
                        </template>
                        <el-menu-item index="/user">==>用户信息</el-menu-item>
                    </el-submenu>



                </el-menu>

            </el-aside>
            <!--
             <i :class="collapseIcon" style="font-size:26px;" @click="handleCollapse"></i>  菜单收缩

            -->
            <el-container>
                <el-header style="color: #33D3DF;background-color: #F2F8F4">



                    <el-tooltip  effect="dark" content="折叠菜单" placement="bottom">
                        <i :class="collapseIcon" style="font-size:26px;" @click="handleCollapse"></i>
                    </el-tooltip>

                    <!--导航栏模板-->
                    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
                        <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: $route.path}" >{{$route.meta.name}}</el-breadcrumb-item>
                    </el-breadcrumb>

                    <div style="flex:1;width: 0;display: flex;align-items: center; justify-content: flex-end">
                        <!-- 设置全屏-->
                        <el-tooltip  effect="dark" content="全屏" placement="bottom">
                            <i  class="el-icon-full-screen" style="font-size: 30px;padding-right: 20px" @click="handleFull"></i>
                        </el-tooltip>


                        <!--下拉栏-->
                        <el-dropdown placement="bottom">
                            <div style="display: flex;align-items: center ;cursor:default;padding-right: 20px">
                                <img :src="user.avatar ||'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt="" style=" width: 40px;height:40px;margin: 0 5px;border-radius: 50%">
                                <span style="font-weight: bold;padding-left: 5px">{{user.name}}</span>
                            </div>
                            <!-- 下拉栏内容 @click.native  item没有click事件-->
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item  @click.native="$router.push('/person')">个人信息</el-dropdown-item>
                                <el-dropdown-item  @click.native="$router.push('/password')">修改密码</el-dropdown-item>
                                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>

                <!--                主体区域-->
                <el-main>
                    <router-view @update:user="updateUser"/>
                </el-main>

            </el-container>
        </el-container>


    </div>
</template>

<script>
    // @ is an alias to /src
    import axios from "axios";
    import request from "@/utils/request";
    export default {
        name: "HomeView",
        data() {
            return {
                isCollapse: false, //不收缩
                asideWith: '200px',
                collapseIcon: 'el-icon-turn-off',
                // users:[],
                user:JSON.parse(localStorage.getItem("honey-user")||'{}'),
                // url:'',
                // user1:{'id':'28','username':'gcc','password':'123'},
                // urls:[]
                flag:true


            }
        },
        mounted() {
            //页面加载完成后进行触发
            // axios.get('http://localhost:8080/user/getall').then(res=>{
            //         console.log(res),
            //             this.users=res.data.data
            //         // res.data={ 数据格式
            //         // code:'200',
            //         //     msg:'请求成功',
            //         //     data:{
            //         //
            //         //     }
            //         // }
            // }
            // )
            // request.get('/user/getall').then(res=>{
            //     this.users = res.data;
            // })


        },
        methods: {
            // preview(url){
            //     window.open(url) //默认预览
            // },
            // showUrls(){
            //     console.log(this.urls)
            // },
            // handleMultipleFileUpload(response,file,fileList){
            //     console.log(response,file,fileList)
            //     this.urls = fileList.map(v=>v.response?.data)
            //
            // },
            // handleTableUpload(row,file,fileList){
            //     row.avatar = file.response.data //data: 'http://localhost:8080/file/download/1710756548188_1.png'
            //     // this.$set(row,'avatar',file.response.avatar)//给row加上一个属性avatar设置为avatar
            //     //触发更新
            //     request.put('/user/update',row).then(res=>{
            //         if(res.code==='200'){
            //             this.$message.success('上传成功');
            //         }else {
            //             this.$message.error('头像上传失败');
            //         }
            //     })
            //
            // },
            // handleFileUpload(response,file,fileList){
            //     this.fileList=fileList;
            // },
            updateUser(user){
                this.user=JSON.parse(JSON.stringify(user))//json的深拷贝，变成一个新对象 ，让父级对象和自己无关
            },
            logout(){
                localStorage.removeItem('honey-user')  //清除当前token和用户数据
                this.$router.push('/login')
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse
                this.asideWith = this.isCollapse ? '64px' : '200px',
                    this.collapseIcon = this.isCollapse ? 'el-icon-open' : 'el-icon-turn-off'
            },
            // 设置全屏
            handleFull() {
                document.documentElement.requestFullscreen()

            }
        }
    }

</script>
<style>


    .el-menu-item .el-icon-s-home{
        color: black;
    }
    .el-submenu__title .el-icon-arrow-down{
        color: black;
    }
    .el-submenu__title .el-icon-film{
        color: black;
    }
    .el-submenu__title .el-icon-chat-square{
        color: black;
    }
    .el-submenu__title .el-icon-picture-outline{
        color: black;
    }
    .el-submenu__title .el-icon-camera{
        color: black;
    }
    .el-submenu__title .el-icon-ship{
        color: black;
    }
    .el-submenu__title .el-icon-monitor{
        color: black;
    }
    .el-submenu__title .el-icon-phone-outline{
        color: black;
    }
    .el-submenu__title .el-icon-user{
        color: black;
    }
    .el-menu--inline {
        background-color: #70E5E6 !important;
    }



    /*后代选择器  !important 强制执行*/
    /*子菜单背景*/
    .el-menu--inline .el-menu-item{
        background-color: #70E5E6 !important;
        padding-left: 49px !important;

        /*#000c17*/
    }

    /*兄弟选择器  !important 强制执行*/
    /*光标字体背景*/
    .el-menu-item:hover, .el-submenu__title:hover {

        background-color:#B0FDC3 !important;
        border-radius: 5px !important;
        width: calc(100%) ;

        /*#1890ff*/
    }

    /*图标颜色*/
    .el-submenu__title:hover i {
        color: black !important;
    }


    /*首页高亮色*/
    .el-menu-item.is-active {
        background-color:#B0FDC3 !important;
        border-radius: 5px !important;
        width: calc(100% - 8px);
        margin: 4px;
        /*#1890ff*/
    }

    .el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip {
        margin-left: -4px;
    }


    .el-menu-item {
        height: 40px !important;
        line-height: 40px !important;

    }


    .el-submenu__title {
        height: 40px !important;
        line-height: 40px !important;

    }

    .el-submenu__icon-arrow {
        margin-top: -5px !important;
        margin-left: -10px !important;
    }

    .el-submenu .el-menu-item {
        min-width: 0 !important;
    }

    .el-menu--inline .el-menu-item.is-active {
        padding-left: 45px !important;
    }

    /*.el-icon-s-fold::before{*/
    /*    width: 60px !important;*/
    /*    height: 60px !important;*/
    /*}*/
    /*transition:width .3s; 过度动画*/


    .logo-title {
        margin-left: 5px;
        font-size: 20px;
        transition: all .3s;
    }

    .el-aside {
        transition: width .3s;
        box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
    }
    .el-header {
        box-shadow: 2px 0 10px rgba(0, 21, 41, .35);
        display: flex;
        align-items: center;
    }


</style>
